<template>
    <div class="header">
        <span class="logo">
            后台管理系统
        </span>
        <el-icon class="icon" @click="clickSon">
            <Fold />
        </el-icon>

        <div class="header-right">
            <div style="margin-right: 20px">
                <el-avatar :icon="UserFilled" />
            </div>
            
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ $store.state.userInfo.name }}
                </span>
                
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="logoutHandle">退出登入</el-dropdown-item>
                    <el-dropdown-item @click="dialogFormVisible = true">修改密码</el-dropdown-item>
                    <el-dropdown-item>查看详情</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>



        <el-dialog v-model="dialogFormVisible" title="修改密码">
            <el-form :model="form">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="updateHandle">Confirm</el-button>
            </span>
            </template>
        </el-dialog>

    </div>

</template>

<script setup>
    import { UserFilled,Fold }  from '@element-plus/icons-vue'
    import { ElMessage,ElMessageBox } from 'element-plus'
    import { useRouter } from 'vue-router'
    import { reactive, ref } from 'vue'
    import { updatePassword } from '@/api/login.js'

    const emits = defineEmits(["clickFather"]);
    const dialogFormVisible = ref(false)
    const dialogAsideVisible = ref(false)
    const formLabelWidth = '140px'
    const router = useRouter()

    const form = reactive({
        username: '',
        password: '',
    })

    function clickSon() {
        dialogAsideVisible.value = !dialogAsideVisible.value
        emits("clickFather", dialogAsideVisible.value);
    }

    const updateHandle = async() => {
        dialogFormVisible.value = false
        const res = await updatePassword(form)
        console.log(res.data)
    }

    const logoutHandle = async() => {
        const res = await ElMessageBox.confirm(
            '是否退出登录?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).catch(err => {
            return err
        })
        if (res == 'confirm') {
            window.sessionStorage.removeItem('token')
            router.push({ path: "/login" });
        }
    }
</script>

<style scoped>
    .header{
        height: 100%;
        display: flex;
        align-items: center;
        .logo{
            padding-right: 10px;
        }
        .header-right{
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
    .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
        outline: none;
    }
    .icon:hover{
        background-color: antiquewhite;
    }

    .icon{
        height: 100%;
        cursor: pointer;
    }

</style>